<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-model 本质上是 使用vue响应式数据劫持实现内存变量变化重新渲染页面
                通过事件绑定，完成当前用户输入值的时候，修改内存变量
            v-model 的取值只能是当前容器vue实例中，数据仓库定义的具有读写功能的变量值
         -->
        <!-- 
            1、输入文本框
         -->
        <p>msg:{{msg}}</p>
        <input type="text" v-model="msg">
        <input type="text" v-model="msg">
        <!-- v-model 本质就是属性绑定+事件绑定 -->
        <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
        <hr>
        <p>date:{{date}}</p>
        <input type="date" v-model="date">
        <p>range:{{range}}</p>
        <input type="range" min="0" step="1" max="10" v-model="range">
        <hr>    
        <input type="radio" name="aa" @change = "print($event)">
        <input type="radio" name="aa" @change = "print($event)">
        <p>radioData：{{radioData}}</p>
        <!-- 
            2、单选按钮
            v-model对于单选按钮绑定的是 change 事件
            v-model 在完成单选按钮绑定时，如果多个单选按钮绑定同一个数据变量， 默认形成分组
            v-model 绑定的单选按钮如果没有提供 value 属性值， 默认表示该单选按钮无值返回 null
         -->
         <input type="radio" value="a" v-model="radioData">
         <input type="radio" value="b" v-model="radioData">
         <hr>
        <input type="radio" value="c" :checked="radioData=='c' " @change="radioData=$event.target.value"> 
        <input type="radio" value="d" :checked="radioData=='c' " @change="radioData=$event.target.values"> 
        <hr>
        <!-- 
            3、复选按钮
            v-model 在绑定复选按钮时，提供两个默认值 true：表示被选中， false：表示没有被选中
                    默认值可以通过 true-value="是" false-value="否" 进行修改
            v-model 通过一个变量绑定多个复选按钮时，默认形成同组效果
            v-model 在完成复选按钮绑定时，根据v-model取值类型完成值的记录和状态记录的切换
                a、取值为非数组时，只记录状态，此时value无效
                b、取值为数组时，记录选择的值，值为选择标签的 value 属性
                    * 且标签没有提供value属性时，默认值为 null
                    * 数组记录的复选按钮值是无序的
         -->
        <p>checkboxData:{{checkboxData}}</p>
        <input type="checkbox" v-model="checkboxData">
        <p>checkboxData1:{{checkboxData1}}</p>
        <input type="checkbox" true-value="是" false-value="否" v-model="checkboxData1">
        <p>checkboxData2:{{checkboxData2}}</p>
        <input type="checkbox" v-model="checkboxData2">
        <input type="checkbox" value="a" v-model="checkboxData2">
        <input type="checkbox" value="b" v-model="checkboxData2">
        <hr>
        <input type="checkbox" :checked=" checkboxData3 " @change=" checkboxData3=$event.target.checked ">
        <hr>
        <input type="checkbox" value="a" :checked=" checkboxData4.indexOf('a')>=0 " 
            @change=" changeBox($event) ">
        <input type="checkbox" value="b" :checked=" checkboxData4.indexOf('b')>=0 " 
            @change=" changeBox($event) "
        >
        <!-- 
            4、下拉列表
                *option标签仅用于select 提供选择支持，并提供取值value或者取值textContext
                *option的selected仅为页面开发时的 下拉列表选择操作属性
                *JS中对于下拉列表的操作都是在完成 select 标签的 value 属性操作
                *    select 的value 属性会记录被选中的option提供的值，同时也会作为判断依据描述哪个option被选中
            v-model 绑定下拉列表只能在 select 标签上定义
         -->
        <p>selectData:{{selectData}}</p>
        <select name="" id="sle" v-model="selectData">
            <option value="A">a</option>
            <option>b</option>
            <option value="C">c</option>
            <option value="D">d</option>
        </select>
        <hr>
        <select :value="selectData" @change="selectData=$event.target.value">
            <option value="A">a</option>
            <option>b</option>
            <option value="C">c</option>
            <option value="D">d</option>
        </select><br>
        <!--
            5、多行文本框
                * HTML 的textarea 标签属性上不存在 value 属性，因此在页面开发时，以标签中的内容定义默认值
                * js操作时 textarea Dom 通过 value记录用户输入值和取值操作
            v-model 完成 textarea 标签的双向数据绑定，也只对DOM的value属性进行操作
        --> 
        <pre>{{info}}</pre>
        <textarea id="te" cols="30" rows="10">asdasdasd</textarea>
        <textarea id="te" cols="30" rows="10" v-model="info">asdasdasd</textarea>
        <textarea id="te" cols="30" rows="10" :value="info" @input="info=$event.target.value">asdasdasd</textarea>
        <hr>
        <!-- 
            6、<input type="file"> 文件选择器标签
                * 文件选择标签，在HTML中仅用于记录选择文件的本地地址
            v-model 不能绑定文件选择标签
        -->
        <img :src="path" alt="" width="100px" height="100px" style="border: 1px solid red;">
        <input type="file" name="" id="file" @change="chooseFile($event)">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"测试变量",
            date:"2019-01-01",
            range:2,
            radioData:"b",
            checkboxData:"",
            checkboxData1:"",
            checkboxData2:[],
            checkboxData3:"",
            checkboxData4:[],
            selectData:"",
            info:"111111",
            file:"",
            path:null
        },
        methods: {
            print(e){
                console.log(e.target.checkde);
            },
            changBox(e){
                if(e.target.checked){
                    this.checkboxData4.push(e.target.value);
                }else{
                    let i = this.checkboxData4.indexof(e.target.value);
                    this.checkboxData4.splice(i,1);
                }
            },
            chooseFile(e){
                this.file = e.target.files[0];// 用于文件上传操作的 文件对象
                // 浏览器不允许读取系统本地地址
                // console.log(e.target.value);
                // this.path = e.target.value;
                let read = new FileReader();//该对象可以读取被JS加载的文件对象数据
                read.readAsDataURL(this.file);// 完成对内存中的文件进行读取 （异步）
                read.onload = ()=>{
                    // console.log(read.result)
                    this.path = read.result; // 得到文件的 base64值
                }
            }
        },
    })
</script>
</html>